<template>
  <div class="container">
    <div class="loginBox">
      <!-- :model="formdata" 绑定数据 ；
      通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可;
      ref 引用对象：除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法 -->
      <a-form-model ref="loginFormRef" :model="formdata" :rules="rules" class="loginForm">
        <h2 style="text-align: center"> 账号密码登录 </h2>

        <a-form-model-item prop="username">
          <!-- v-model="formdata.username" 绑定输入框的数据 -->
          <a-input v-model="formdata.username" placeholder="Username">
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>

         <a-form-model-item prop="password">
           <!-- v-on:keyup.enter="login" 监听键盘事件，按enter 直接登录 -->
          <a-input v-model="formdata.password" placeholder="Password" type="password" v-on:keyup.enter="login">
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>

         <a-form-model-item class="loginBtn">
          <a-button type="primary" style="left: -60%; margin:10px" @click="login">登录</a-button>
          <a-button type="info" style="left: -50%; margin:10px" @click="resetForm">取消</a-button>
        </a-form-model-item>

      </a-form-model>

    </div>

  </div>

</template>

<script>
export default {
  data () {
    return {
      formdata: {
        username: '',
        password: ''
      },
      // 规则验证
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 10, message: '用户名不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码错误', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
    resetForm () {
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      // validate 对整个表单进行校验的方法
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error('登录验证失败,账号或密码错误')
        // 如果验证通过就发送数据到后端;{ data: res } 结构赋值
        const { data: res } = await this.$http.post('login', this.formdata)
        console.log(res)
        // 判断登录账号密码是否正确，错误就打印错误
        if (res.status !== 200) return this.$message.error(res.message)
        // 账号密码正确就保存token，并跳转到管理页面
        window.sessionStorage.setItem('token', res.token)

        this.$router.push('admin')
      })
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  background-color: #282c34;
}

.loginBox {
  width: 400px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
}
.loginForm {
  width: 100%;
  position: absolute;
  bottom: 10%;
  padding: 0 40px;
  box-sizing: border-box;
}
.loginBtn {
  display: flex;
  justify-content: flex-end;
}
</style>
